<template>
  <div class="user">
    <div
      class="user_header"
      :style="{backgroundImage: `url(${background_image})`}"
    >
      <van-icon
        name="set"
        class="user_set"
      />
      <div class="user_avatar">
        <img
          :src="wxImage"
          alt="头像"
          width="20%"
        >
      </div>
    </div>
    <van-cell-group>
      <van-cell title="个人信息">
      </van-cell>
      <van-cell
        icon="maintenance"
        title="维保单位"
        :value="maintName"
      />
      <van-cell
        icon="username"
        title="用户名"
        :value="username"
      />
      <van-cell
        icon="mobile"
        title="手机"
        :value="mobile"
      />
    </van-cell-group>
    <div class="operaiton-button">
      <van-button
        size="large"
        type="danger"
        :loading="isLoading"
        @click="unBindWx"
        class="btn-bind"
      >登出</van-button>
    </div>

  </div>
</template>

<script>
import { mediaURL } from "@/config";
import { uploadDutyLetter, UnBindUser } from "./../../api/user";
import wx from "weixin-js-sdk";
import { mapState } from "vuex";
import avatar_default from "@/assets/images/avatar_default.png";
import bg_default from "@/assets/images/user_head_bg.png";
export default {
  data() {
    return {
      background_image: bg_default,
      isLoading: false
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    maintName: state => state.user.maintName,
    username: state => state.user.username,
    mobile: state => state.user.mobile,
    wxImage: state => state.user.wxImage || avatar_default
  }),

  watch: {},

  created() {},

  methods: {
    async unBindWx() {
      this.isLoading = true;
      let res = await UnBindUser({});
      if (res.code === 0) {
        this.$router.replace("/login");
      } else {
        this.$toast.fail(res.mag);
      }
      this.isLoading = false;
    }
  }
};
</script>


<style lang="scss" scoped>
.user_header {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  padding-top: 30px;
}

i.user_set {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
.user_avatar {
  margin-bottom: 10px;
  img {
    border: 0;
    border-radius: 50%;
  }
}
</style>
